import { createContext, useState } from 'react';
import { RightOutlined } from '@ant-design/icons';
import { Outlet } from '@umijs/max';
import classNames from 'classnames';
import { useLocation } from 'umi';

import { homeUrl } from '../../config/routes';
import { withoutSecMenuRoutes } from '../../config/routes';

import { ErrorBoundary } from './components/ErrorBoundary';
import MainMenu from './components/SideMenu/CustomMenu/MainMenu';

export const MainLayoutContext = createContext({});

const Layout = (props) => {
  const { route } = props;

  const pathname = useLocation().pathname;
  const pathHasSecMenu = !withoutSecMenuRoutes.find(
    (item) => pathname === item,
  );
  const [isOpen, setIsOpen] = useState(true);
  const curPathname = useLocation().pathname;

  const iconContainerClasses = classNames('fold-icon-container', {
    open: !!isOpen,
  });
  const mainMenuClasses = classNames('main-menu-container', {
    'home-menu-container': curPathname === homeUrl,
  });
  const mainMenuRightContentClasses = classNames('main-menu-right-content', {
    'home-main-menu-right-content': curPathname === homeUrl,
  });

  const onSecMenuChange = (status) => {
    setIsOpen(status);
  };
  const passedContext = {
    isOpen,
    hasSecMenu: pathHasSecMenu,
    onSecMenuChange,
  };
  // 不需要菜单栏直接隐藏
  const isSecondLayout =
    false && route.path === '/' && route.parentId === '@@/global-layout';

  return (
    <div>
      <MainLayoutContext.Provider value={passedContext}>
        {isSecondLayout && (
          <div className={mainMenuClasses}>
            <MainMenu />
          </div>
        )}
        <div className={mainMenuRightContentClasses}>
          <ErrorBoundary>
            <Outlet></Outlet>
          </ErrorBoundary>
          {isSecondLayout && (
            <div
              className={iconContainerClasses}
              onClick={() => {
                setIsOpen(!isOpen);
              }}
              style={{ display: pathHasSecMenu ? 'flex' : 'none' }}
            >
              <RightOutlined className="fold-icon" />
            </div>
          )}
        </div>
      </MainLayoutContext.Provider>
    </div>
  );
};

export default Layout;
